<template>
  <div class="borrowbook_container">
    <div class="header"><p>借阅图书</p></div>
    <div class="banner">
      <div class="card_number">
        <el-input
          placeholder="请输入借阅证号"
          v-model.number="borrowInfo.cardNumber"
          :prefix-icon="Search"
          style="height: 40px; width: 300px"
        ></el-input>
      </div>
      <div class="book_number">
        <el-input
          placeholder="请输入图书编号"
          v-model.number="borrowInfo.bookNumber"
          :prefix-icon="Calendar"
          style="height: 40px; width: 300px"
        >
          <el-icon><RefreshRight /></el-icon>
        </el-input>
      </div>
      <div class="borrow_date">
        <el-date-picker
          v-model="borrowInfo.borrowDate"
          type="datetime"
          placeholder="选择日期和时间"
          size="large"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="YYYY-MM-DD h:m:s"
        />
      </div>
      <div class="borrow_button">
        <el-button type="primary" @click="borrowBook" size="large">借阅</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from "vue";
import { Calendar, Search } from "@element-plus/icons-vue";
import { BorrowBook } from "../../api/api";

const borrowInfo = reactive({
  cardNumber: null,
  bookNumber: null,
  borrowDate: "",
});

const borrowBook = () => {
  console.log(borrowInfo.borrowDate);
  if (borrowInfo.borrowDate === "") {
    return ElMessage.error("借阅时间不为空");
  }
  //请求表格数据
  BorrowBook(borrowInfo)
    .then(res => {
      console.log(res.data, "111");
      ElMessage({
        message: "借阅成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err.response.data.message, "err");
      if ((err.response.data.message = "The card number is not correct err")) {
        ElMessage.error("借阅证输入错误");
      }
      ElMessage.error("借阅失败");
    });

  // 清空数据
  borrowInfo.bookNumber = "";
  borrowInfo.cardNumber = "";
  borrowInfo.borrowDate = "";
};
</script>

<style lang="less" scoped>
.borrowbook_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 100%;
    height: 100px;
    // background-color: pink;
    p {
      color: black;
      font-size: 30px;
      text-align: center;
      line-height: 60px;
    }
  }
  .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    height: 400px;
    // background-color: brown;
    div {
      margin-top: 15px;
    }
    .borrow_date {
      margin-top: 25px;
    }
    .borrow_button {
      margin-top: 30px;
    }
  }
}
</style>
